<template>
    <div class="collection">
        这是收藏页面
        <ListInfo v-for="item in listData" :key="item.id" :title="item.title" :id="item.id" :author="item.author" :time="item.niceDate" :tag="false" :kind="false" :checked="true" @changeCheck="getCheck">
        </ListInfo>
    </div>
</template>

<script>
import { getCollect, delMyCollect } from "@/api"
import ListInfo from "@/components/ListInfo.vue"

export default {
    components:{
        ListInfo
    },
    data(){
        return {
            listData: []
        }
    },
    mounted() {
        // 请求收藏文章数据
        getCollect().then(res=>{
            this.listData = res.data.data.datas
            console.log(this.listData);
        })
    },
    methods:{
        // 改变组件内复选框状态时，会触发当前方法
        getCheck(val, id){
            // 准备存储originId的变量
            let oid = -1;
            // 准备存储要取消收藏的数据索引的变量
            let idx = 0;
            // 从总数据中，根据当前修改复选框状态的列表id获取对应的originId，同时记录当前id对应的数据数组中的索引
            this.listData.some((val, i)=>{
                // 如果数据中的id和组件内传回来的id相同
                if(val.id === id){
                    // 记录索引
                    idx = i;
                    // 记录originId，有记录，没有为-1（接口要求）
                    oid = val.originId ? val.originId : -1;
                }
            })
            // 如果复选框被取消
            if(!val){
                // 调用收藏页面的取消收藏接口，按要求发送数据
                delMyCollect(id, oid).then(res=>{
                    // 后端返回取消收藏成功，后，从前端总数据中删除被取消收藏的数据
                    this.listData.splice(idx, 1);
                });
            }
        }
    }
}
</script>

<style>
</style>